// Color variables
@black: #000;
@white: #fff;
@red: #f44;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
@gray: #c8c9cc;
@gray-light: #e5e5e5;
@gray-darker: #7d7e80;
@gray-dark: #969799;

@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f8f8f8;
@background-color-light: #fafafa;

@base-zindex: 1;
@line-color: #ececec;

//badge
@badge-default-bg: #D0D0D0;
@badge-default-color: #FFF;
@badge-primary-bg: #04BE02;
@badge-danger-bg: #EF4F4F;
@badge-warning-bg: #FFB400;
@badge-hollow-bg: #FBFBFB;
@badge-hollow-color: #B2B2B2;

// Tag
@tag-padding: .2em .5em;
@tag-font-size: 10px;
@tag-medium-font-size: 12px;
@tag-large-font-size: 14px;
@tag-text-color: @white;
@tag-border-radius: .2em;
@tag-round-border-radius: .8em;

// navBar
@nav-bar-height: 46px;
@nav-bar-background-color: @white;
@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: @blue;
@nav-bar-text-color: @blue;
@nav-bar-title-font-size: 16px;
@nav-bar-title-text-color: @text-color;

// Button
@button-mini-height: 22px;
@button-mini-min-width: 50px;
@button-mini-font-size: 10px;
@button-mini-line-height: 20px;
@button-small-height: 30px;
@button-small-font-size: 12px;
@button-small-min-width: 60px;
@button-small-line-height: 28px;
@button-normal-font-size: 14px;
@button-large-height: 50px;
@button-large-line-height: 48px;
@button-default-height: 44px;
@button-default-line-height: 42px;
@button-default-font-size: 16px;
@button-default-color: @text-color;
@button-default-background-color: @white;
@button-default-border-color: @border-color;
@button-primary-color: @white;
@button-primary-background-color: @green;
@button-primary-border-color: @green;
@button-info-color: @white;
@button-info-background-color: @blue;
@button-info-border-color: @blue;
@button-danger-color: @white;
@button-danger-background-color: @red;
@button-danger-border-color: @red;
@button-warning-color: @white;
@button-warning-background-color: @orange;
@button-warning-border-color: @orange;
@button-bottom-action-default-color: @white;
@button-bottom-action-default-background-color: @orange;
@button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red;
@button-border-width: 1px;
@button-border-radius: 2px;
@button-round-border-radius: 10em;
@button-plain-background-color: @white;
@button-disabled-opacity: .5;

// NumberKeyboard
@number-keyboard-key-height: 54px;
@number-keyboard-key-background: #ebedf0;

.g-fix-ios-overflow-scrolling-bug {
    /* 针对IOS 修复 css overflow scroll bug */
    -webkit-overflow-scrolling: auto !important;
}

.g-fix-ios-prevent-scroll {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

.mask(@bgcolor: rgba(0, 0, 0, .4), @z-index: @base-zindex * 1500) {
    background-color: @bgcolor;
    position: fixed;
    z-index: @z-index;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.top-line(@color, @zindex: 0) {
    content: '';
    position: absolute;
    z-index: @zindex;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, @color 50%, transparent 50%);
  }

  .bottom-line(@color, @zindex: 0) {
    height: 1px;
    position: absolute;
    z-index: @zindex;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    background-image: linear-gradient(0deg, @color 50%, transparent 50%);
  }

  .left-line(@color, @zindex: 0) {
    content: '';
    position: absolute;
    z-index: @zindex;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to left, @color 50%, transparent 50%);
  }

  .right-line(@color, @zindex: 0) {
    content: '';
    position: absolute;
    z-index: @zindex;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to right, @color 50%, transparent 50%);
  }

